<template>
  <div class="classify"><Bb/>
  <div class="top">
    <Top/>
  </div>
  <div class="listNav">
    <ul>
      <li v-for="(v,i) in text" :key="i">{{v}}</li>
    </ul>
  </div>
<div class="right">
<Zl/>
</div>
 <router-view></router-view>
  </div>
</template>

<script>
import Top from "@/components/classify/top.vue"
import Zl from "@/components/classify/zhuliang/zl.vue"
export default {
  data(){
    return{
      text:["狗狗主粮","狗狗零食","狗狗窝垫","狗狗玩具","狗狗清洁","狗狗保健","狗狗护理","狗狗生活","狗狗牵引","出游洗澡","狗狗服饰","狗狗美容"]
    }
    
  },
  components:{
    Top,Zl
  }
}
</script>

<style lang="scss">

.classify{
  background-color: #f3f4f5;
  .listNav{
    width:.7rem;
    border-right: 1px soild #f3f4f5;
    font-size:.13rem ;
    float: left;
    li{
      width: .7rem;
      height: .45rem;
      line-height: .45rem;
      text-align: center;
      background-color: #fff;
      border-bottom: 1px solid #f3f4f5;
    }
  }
  .right{
    float: right;
    width:3rem ;
    // background-color: olivedrab;
  }
}
</style>